<template>
  <view class="viewport" :style="{ height: screenWidth + 'px' }">
    <view class="container">
      <view class="titleitem">设备状态</view>
      <view>
        <l-echart ref="chartRef" @finished="init2"></l-echart>
      </view>
    </view>
    <view class="container">
      <view class="titleitem itemtable">
        <view style="flex: 1">设备状态</view>
        <view style="flex: 1; text-align: center">设备数量</view>
        <view style="flex: 1; text-align: right">占比</view>
      </view>
      <view class="titleitemth itemtable" v-for="(item, index) in list">
        <view style="flex: 1; display: flex">
          <view class="circledot">
            <view class="colorcircle" :style="{ background: item.color }"></view>
          </view>
          <view>{{ item.name }}</view>
        </view>
        <view style="flex: 1; text-align: center">{{ item.value }}</view>
        <view style="flex: 1; text-align: right">{{ item.percent }}</view>
      </view>
    </view>
    <view class="container" style="width: 94vw">
      <view class="titleitem">设备保养</view>
      <view style="display: flex; align-items: center">
        <view><l-echart ref="chartRef1" @finished="init1"></l-echart></view>
        <view>
          <view style="margin-bottom: 30rpx" v-for="(item, index) in state1.series[0].data">
            <view style="display: flex">
              <view class="circledot">
                <view class="colorcircle" :style="{ background: item.color }"></view>
              </view>
              <view style="flex: 1; display: flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap">{{ item.name }}</view>
              <view style="margin-left: 10rpx; flex: 1; display: flex; justify-content: center; align-items: center; text-align: center; white-space: nowrap">
                {{ item.value }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container">
      <view class="titleitem">保养任务</view>
      <view>
        <l-echart ref="chartRef2" @finished="init2"></l-echart>
      </view>
    </view>
  </view>
</template>

<script setup>
// 全量包  二选一
import * as echarts from 'echarts';

// // 按需引入 二选一
// import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 按需引入 注册必须的组件
echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
import { reactive, ref, onMounted } from 'vue';
let screenWidth = ref(200);

const list = reactive([
  {
    name: '报废',
    value: '20',
    percent: '20',
    color: '#5470C6'
  },
  {
    name: '停役',
    value: '20',
    percent: '20',
    color: '#91CC75'
  },
  {
    name: '故障',
    value: '20',
    percent: '20',
    color: '#FAC858'
  },
  {
    name: '正常运行',
    value: '20',
    percent: '20',
    color: '#EB6565'
  },
  {
    name: '维修中',
    value: '20',
    percent: '20',
    color: '#70BBD8'
  }
]);

const state = ref({});
const state1 = ref({});
const state2 = ref({});

state.value = {
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: ' 完好设备占比',
    left: 'center',
    top: '50%',
    textStyle: {
      color: '#999999',
      fontSize: 20,
      align: 'center'
    }
  },

  graphic: {
    type: 'text',
    left: 'center',
    top: '40%',
    style: {
      text: '80%',
      textAlign: 'center',
      fill: '#333',
      fontSize: 20,
      fontWeight: 700
    }
  },

  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      // label: {
      //   show: false,
      //   position: 'center'
      // },
      //在这就是控制提示线文字的代码
      label: {
        normal: {
          show: true, //开启提示线文字
          position: 'outer', //设置文字的所在的位置
          formatter: '{b}', //设置展示的内容
          borderWidth: 20, //大小设置
          borderRadius: 4,
          color: '#aaaaaa', //文字颜色
          rich: {
            //设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）
            c: {
              fontSize: 16,
              lineHeight: 12
            }
          }
        }
      },

      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        {
          value: 1048,
          name: '报废'
        },
        {
          value: 735,
          name: '停役'
        },
        {
          value: 580,
          name: '故障'
        },
        {
          value: 484,
          name: '正常运行'
        },
        {
          value: 300,
          name: '维修中'
        }
      ]
    }
  ]
};

state1.value = {
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: ' 10台',
    left: 'center',
    top: 'center',
    textStyle: {
      color: '#000000',
      fontSize: 20,
      align: 'center'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {
          value: 5,
          name: '待接单',
          color: '#5470C6'
        },
        {
          value: 5,
          name: '保养中',
          color: '#91CC75'
        },
        {
          value: 5,
          name: '待验证',
          color: '#FAC858'
        },
        {
          value: 5,
          name: '待执行',
          color: '#EB6565'
        }
      ]
    }
  ]
};

state2.value = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      data: [
        {
          value: 1048,
          name: '已完成'
        },
        {
          value: 735,
          name: '未执行'
        },
        {
          value: 580,
          name: '待执行'
        },
        {
          value: 484,
          name: '逾期'
        },
        {
          value: 300,
          name: '保养中'
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 组件能被调用必须是组件的节点已经被渲染到页面上

const chartRef = ref(null);
const chartRef1 = ref(null);
const chartRef2 = ref(null);

onMounted(() => {
  uni.getSystemInfo({
    success: function (res) {
      screenWidth.value = res.windowWidth * 0.94 * 3 + res.windowWidth * 0.7 * 1 + 60;
      // 组件能被调用必须是组件的节点已经被渲染到页面上
      setTimeout(async () => {
        if (!chartRef.value) return;
        const myChart = await chartRef.value.init(echarts);
        chartRef.value.resize({
          width: Math.floor(res.windowWidth * 0.94),
          height: Math.floor(res.windowWidth * 0.94)
        });
        myChart.setOption(state.value);

        if (!chartRef1.value) return;
        const myChart1 = await chartRef1.value.init(echarts);
        chartRef1.value.resize({
          width: Math.floor(res.windowWidth * 0.7),
          height: Math.floor(res.windowWidth * 0.7)
        });
        myChart1.setOption(state1.value);

        if (!chartRef2.value) return;
        const myChart2 = await chartRef2.value.init(echarts);
        chartRef2.value.resize({
          width: Math.floor(res.windowWidth * 0.94),
          height: Math.floor(res.windowWidth * 0.94)
        });
        myChart2.setOption(state2.value);
      }, 300);
    }
  });
});

// 渲染完成
const init = () => {
  console.log('渲染完成');
};
</script>

<style scopedlang="scss" scoped>
.viewport {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  width: 100vw;
  overflow-y: scroll;
}

.container {
  border-radius: 16rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
}

page {
  background-color: #f5f5f5;
}

.titleitem {
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 14rpx;
  padding-bottom: 14rpx;
  font-weight: bold;
  border-bottom: 2rpx solid #999;
}

.titleitemth {
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ddd;
}

.itemtable {
  display: flex;
  width: 94vw;
  justify-content: space-between;
}

.circledot {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 40rpx;
}

.colorcircle {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
}

.title {
  text-align: center;
}
</style>
